<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <el-row>
      <div class="center-form">
        <el-card class="box-card" style="width: 100%;">
        </el-card>
      </div>
    </el-row>
    <el-table
        :data="data"
        border
        ref="tableRef"
        v-loading="loading"
        element-loading-text="正在加载..."
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        row-key="id"
        :tree-props="{ children: 'children'}"
        style="flex: 1;">
      <template v-for="item in columns">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth">
          <template #default="scope" v-if="item.render">
            <render-column :render="item.render" :scope="scope" :item="item"></render-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-button @click="getAll"></el-button>
  </div>
</template>

<script setup lang="jsx">
import RenderColumn from "@/components/RenderColumn/index.vue";
import {onMounted, ref} from "vue";
import {getAllMenu} from "@/api/backend/system/menu.js";
import GuiguIcon from "@/components/GuiguIcon/index.vue";


const getAll=()=>{
  getAllMenu().then(res=>{
    data.value=res.data
  })
}

const loading=ref(false)
const data=ref([])
const columns = [
  {
    prop: "name",
    label: "菜单名称",
    minWidth:'160px',
    render(h, row, column, item){
      const name=row[item.prop]
      const iconName=row["icon"]

      return <>
        <GuiguIcon iconName={iconName}></GuiguIcon>
        <span> {name}</span>
      </>

    }
  },

  {
    prop: "title",
    label: "菜单标题",
    minWidth:'160px',
  },
  {
    prop: "remark",
    label: "菜单描述",
    minWidth:'160px',
  },
  {
    prop: "path",
    label: "菜单路径",
    minWidth:'160px'
  },
  {
    prop: "sort",
    label: "排序",
    minWidth:'160px'
  },
  {
    prop: "level",
    label: "级别",
    minWidth:'160px'
  },
  {
    prop: 'icon',
    label: "图标",
    minWidth: "160px",
    render(h, row, column, item){
      const iconName=row[item.prop]
      return  <GuiguIcon iconName={iconName}></GuiguIcon>
    }
  },
  {
    prop: "operate",
    label: "操作",
    render(h, row, column, item) {
      return <ElButtonGroup>
        <ElButton size="small" type="primary" style="margin-right:5px;">添加同级菜单</ElButton>
        <ElButton size="small" type="primary" style="margin-right:5px;">添加子级菜单</ElButton>
        <ElButton size="small" type="warning" style="margin-right:5px;">编辑</ElButton>
        <ElButton size="small" type="danger" style="margin-left:5px;">删除</ElButton>
      </ElButtonGroup>

    },
    minWidth:'260px',
    fixed:'right'
  }
]
onMounted(()=>{
  getAll()
})
</script>

<style scoped>
.center-form {
  width: 100%;
  display: flex;
  justify-content: center;
}


</style>